import React, { useEffect, useRef } from 'react';
import RelationGraph from 'relation-graph/react';
import type { RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RGOptions, RelationGraphComponent } from 'relation-graph/react';


const MultiGroup2 = () => {
  const graphRef = useRef<RelationGraphComponent | null>(null);
  const graphOptions: RGOptions = {
    backgroundImageNoRepeat: true,
    moveToCenterWhenRefresh: true,
    zoomToFitWhenRefresh: true,
    useAnimationWhenExpanded: true,
    placeOtherGroup: true,
    defaultNodeWidth: 150,
    defaultNodeHeight: 30,
    debug: false,
    showDebugPanel: false,
    layout: {
      label: '树状',
      layoutName: 'tree',
      from: 'left',
      layoutClassName: 'seeks-layout-center',
    }
  };

  useEffect(() => {
    showGraph();
  }, []);

  const showGraph = async () => {
    const __graph_json_data: RGJsonData = {
      "rootId": "2",
      "nodes": [
        { "id": "2", "text": "ALTXX" },
        { "id": "3", "text": "CH2 TTN" },
      ],
      "lines": [
        { "from": "2", "to": "3", "text": "子系统" },
      ]
    };

    const graphInstance = graphRef.current!.getInstance();
    if (graphInstance) {
      await graphInstance.setJsonData(__graph_json_data);
      await graphInstance.refresh();
    }
  };

  const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick')
  };

  const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    console.log('onLineClick:', lineObject);
  };

  const clickUpdate = () => {
    // const graphInstance = graphRef.current!.getInstance();
    console.log('onNodeClick:', graphRef, graphRef.current.getInstance().getNodes());
    const nodes = graphRef.current.getNodes()
    nodes[0].text = '111111111111111'
    graphRef.current.getInstance().dataUpdated()
  };

  return (
    <div>
      <div style={{ height: '100vh' }}>
        <RelationGraph ref={graphRef} options={graphOptions} onNodeClick={onNodeClick} onLineClick={onLineClick} />
      </div>
    </div>
  );
};

export default MultiGroup2;
